<template>
  <div id="nav">
    <h1 class="text-center">
      <slot></slot>
    </h1>
    <router-link class="nav-link" to="/">Home</router-link>
    <router-link class="nav-link" to="/list">List</router-link>
    <router-link class="nav-link" to="/register">Register</router-link>
    <router-link class="nav-link" to="/login">Login</router-link>
  </div>
</template>

<script>
export default {
  name: 'Head'
}
</script>

<style lang="scss" scoped>
.router-link-exact-active {
  color: black;
  background: #eee;
}
.nav-link {
  display: inline-block;
  margin: 0 0.5rem;
}
</style>
